<template>
  <div class="order">
    <div class="cart" v-if="cart.length">
      <van-swipe-cell
        v-for="(foods, index) in cart"
        :key="index"
      >
       <van-card
          :title="foods.name"
        >
        <template #thumb>
           <div class="van-image" style="width: 100%; height: 100%; display: flex;">
              <van-checkbox
                :value="foods.isChecked"
                @click="toggleChecked(foods.name)"
              ></van-checkbox>
              <img :src="foods.image" class="van-image__img" style="width: 60px;">
            </div>
        </template>
        <template #num>
          <van-stepper
           theme="round"
           button-size="22"
           integer
           :value="foods.amount"
           @change="changeAmount({name: foods.name, amount: $event})" />
        </template>
         <template #desc>
           <p>{{foods.description}}</p>
           <p>月销售{{foods.sellCount}}份 <span :style="{marginLeft:'10px'}">好评率{{foods.rating}}%</span></p>
         </template>
         <template #price>
           <p>
             <span :style="{color: 'red', fontSize:'14px'}">￥{{foods.price}}</span>
          </p>
         </template>
        </van-card>
        <template #right>
          <van-button
           square
           text="删除"
           type="danger"
           class="delete-button"
           @click="removeFromCart(foods.name)"
           />
        </template>
      </van-swipe-cell>
      <van-submit-bar :price="totalMoney" button-text="提交订单">
        <van-checkbox
         :value="isAllChecked"
         @click="toggleCheckedAll(isAllChecked)"
         >全选</van-checkbox>
        <template #tip>
          你的收货地址不支持同城送, <span>修改地址</span>
        </template>
      </van-submit-bar>
    </div>
  <div v-else>
    <van-empty description="购物车空空如也" />
  </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  name: 'Order',
  computed: {
    ...mapState(['cart']),
    ...mapGetters(['isAllChecked', 'totalMoney'])
  },
  methods: {
    ...mapMutations(['removeFromCart', 'changeAmount', 'toggleChecked', 'toggleCheckedAll'])
  }
}
</script>

<style lang="less" scoped>
  .order {
    margin-bottom: 40px;
  }
  .goods-card {
    margin: 0;
    background-color: #fff;
    display: flex;
  }

  .delete-button {
    height: 100%;
  }
</style>
